<!-- 运营分析 -->
<template>
  <div class="content3">
    <div class="c3left"></div>

    <div class="c3right">
      <!-- 设备数量echarts -->
      <div id="c3e1">1</div>
      <!-- 每栋数量展示 -->
      <div id="c3e2">2</div>
      <!-- 数量占比 -->
      <div id="c3e3">3</div>
    </div>
  </div>
</template>

<script>
import { child3Echart1, child3Echart2, child3Echart3 } from '@/common/echartsdata.js';

export default {
  name: 'childshop',
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.load3Echarts();
  },
  components: {},
  methods: {
    //加载echarts
    load3Echarts() {
      child3Echart1();
      child3Echart2();
      child3Echart3();
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang="less" scoped>
.content3 {
  width: 100%;
  height: (100%-@htop);
  position: absolute;
  top: @htop;
  z-index: 9;
  // background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  //左侧
  .c3left {
    height: 97%;
    padding: 10px;
    margin-left: 30px;
    float: left;
    color: #fff;
    display: flex;
    flex-direction: column;
    width: 350px;
    background: url(~assets/icon/echartsbg1.png) no-repeat;
    background-size: 100% 100%;
    pointer-events: auto;
  }

  //右侧
  .c3right {
    // background-color: skyblue;
    display: flex;
    flex-direction: column;
    float: right;
    margin-right: 30px;
    pointer-events: auto;
    #c3e1,
    #c3e2,
    #c3e3 {
      width: 280px;
      min-height: 220px;
      height: 30%;
      background: url('~assets/icon/echartsbg.png') no-repeat;
      // background-image: url(../../assets/icon/echartsbg.png);
      background-size: 100% 100%;
      padding: 20px 10px;
    }
  }
}
</style>
